01-Echarts折线图基本实现、最大值、最小值、堆叠折线图等等

最新推荐文章于 2024-09-06 13:50:20 发布

请问大家代码怎么敲

最新推荐文章于 2024-09-06 13:50:20 发布

阅读量5.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Echarts 数据可视化

本文链接：https://blog.csdn.net/liumuye88888/article/details/116720774

Echarts 同时被 2 个专栏收录

7 篇文章

订阅专栏

数据可视化

7 篇文章

订阅专栏

本文介绍如何使用Echarts绘制折线图，并展示各种实用功能，包括最大值、最小值和平均值标记、平滑线条、填充效果、边界处理、比例调整及堆叠折线图等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Echarts折线图基本实现

特点

折线图常用来分析数据随时间的变化趋势

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
</body>
<script>
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        type:'category',
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {
        type:'value'
    },
    series: [{
        name: '销量',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</html>

最大值、最小值、平均值、标注区间显示

都是写在series中

 series: [
        {
        name: '销量',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20],
        markPoint: {
            data:[
                {
                    type:'max' //最大值
                },
                {
                    type:'min' //最小值
                }
            ]
        },
        markLine:{
            data:[
                {
                    type:'average' //平均值
                }
            ]
        },
        markArea:{ //标注区间 x轴衬衫-到雪纺衫有阴影
            data:[
                [
                {
                    xAxis:'衬衫'
                },
                {
                    xAxis:'雪纺衫'
                }
            ]
            ]
        }
    }
]

在这里插入图片描述

折线线条平滑效果、风格、填充效果

 		smooth:true, //线条平滑 风格
        lineStyle:{
            color:'green',
            type:'dashed' //dotted solid
        },
        areaStyle:{ //填充风格
            color:'red'
        } //填充

在这里插入图片描述

紧挨边缘

xAxis:中设置 boundaryGap:false

  xAxis: {
        type:'category',
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
        boundaryGap:false, //紧挨边缘
    },

在这里插入图片描述

脱离0值比例

**使用在数值离0都比较远并且数值都相差不多
在yAxis中加scale:true **

  yAxis: {
        type:'value',
        scale:true //脱离0值比例  离0远值都相差不多
    },
series: [
        {
        name: '销量',
        type: 'line',
        data: [1000, 1005, 1100, 1050, 1200, 980],
        stack:'all', //堆叠图
        areaStyle:{}
        }
        ]

未脱离0值比例
在这里插入图片描述
脱离0值比例显示更明显

堆叠折线图

在series中再创建一个对象,在对象中加stack:'all’是为了不让两条折线交叉,不然显得杂乱无章

series: [
        {
        name: '销量',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20],
        stack:'all', //堆叠图
        areaStyle:{}  //填充效果 有默认颜色
        },
         {
        name: '销量',
        type: 'line',
        data: [30, 50, 10, 6, 5, 30],
        stack:'all',
        areaStyle:{
            color:'green'
        }
    }
        ]